<template>
  <article class="media">
    <div class="media-left">
      <el-avatar :size="48" :src="comment.avatar" />
    </div>
    <div class="media-content">
      <div class="content">
        <p class="is-size-5 mb-5">
          <router-link
            :to="{
              name: 'user',
              params: { username: comment.username },
            }"
          >
            {{ comment.alias }}
            <span class="is-size-7 has-text-grey">{{
              "@" + comment.username
            }}</span>
          </router-link>
          <small class="m1-2" style="float:right;>">
            {{ comment.createTime | date }}</small
          >
          <br />
          <span style="white-space: pre-wrap" class="content is-size-6">{{
            comment.content
          }}</span>
        </p>
      </div>
    </div>
  </article>
</template>

<style>
.content {
  word-break: break-all;
}
</style>

<script>
export default {
  name: "CommentItem",
  props: {
    comment: {
      type: Object,
      requried: true,
    },
  },
};
</script>

